import { useState, useEffect } from 'react'
import { Navigate, useRoutes, useNavigate, useLocation } from 'react-router-dom'
import { Tabs } from 'antd'
import Count from '../Count/index-react-redux-hook版'
import Person from '../Person/index'
const items = [
  { key: 'count', label: 'Count' },
  { key: 'person', label: 'Person' },
]

export default function TestRouter() {
  const [activeKey, setActiveKey] = useState('')
  const navigate = useNavigate()
  const location = useLocation()
  const routes = useRoutes([
    { path: '/count', element: <Count /> },
    { path: '/person', element: <Person /> },
    { path: '/', element: <Navigate to="/count" /> },
  ])

  useEffect(() => {
    const key = location.pathname.slice(1)
    setActiveKey(key)
  }, [activeKey, location.pathname])

  function tabChange(key) {
    navigate(`/${key}`)
    setActiveKey(key)
  }
  return (
    <>
      <Tabs activeKey={activeKey} items={items} onChange={tabChange} />
      {routes}
    </>
  )
}
